/*
 * @Date         : 2022-03-03 16:27:50
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 19:11:16
 * @Description  : 系统主题组件
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */

import React from 'react'
import { observer } from 'mobx-react-lite'
import { useTranslation } from 'react-i18next'
import { Radio, RadioGroup } from '@douyinfe/semi-ui'
import useLocale from '@/hooks/useLocale'
import { LocaleType } from '@/types/app'

import './index.less'

const LangSet = () => {
  const { i18n } = useTranslation()
  const [locale, updateLocale] = useLocale()

  // 切换语言
  const handleChageLocale = (lang: LocaleType) => {
    updateLocale(lang)
    i18n.changeLanguage(lang)
  }

  return (
    <RadioGroup
      className="locale-change"
      onChange={e => handleChageLocale(e.target.value)}
      type='button'
      buttonSize="middle"
      defaultValue={locale}
      aria-label="多语言切换"
    >
      <Radio value="zh">中文</Radio>
      <Radio value="en">EN</Radio>
    </RadioGroup>
  )
}

export default observer(LangSet)